<template>
  <div class="jszl-content">
    <!-- 数据资产概览 -->
    <div class="sjzcgl-content">
      <div class="time-select">
        <span class="btn" :class="{ active: currentTime == 1 }" @click="selectTime(1)">近24小时</span>
        <span class="btn" :class="{ active: currentTime == 7 }" @click="selectTime(7)">近7天</span>
        <span class="btn hasborder" :class="{ active: currentTime == 30 }" @click="selectTime(30)">近30天</span>
      </div>
    </div>
    <div class="box-flex">
      <div class="left-box">
        <sjzlleader :allData="allData" v-if="leaderList.indexOf(UserId) > -1"></sjzlleader>
        <sjzldy :allData="allData" v-if="memberList.indexOf(UserId) > -1"></sjzldy>
        <sjlxfx :allData="allData"></sjlxfx>
        <sjqsfx :allData="allData"></sjqsfx>
      </div>
      <div class="left-box">
        <zxsj></zxsj>
        <xcdb></xcdb>
        <dbqd></dbqd>
      </div>
      <!-- <div class="right-box">
        <cygj></cygj>
      </div> -->
    </div>
  </div>
</template>
<script setup>
import { ScaleMin } from '@/utils/screen-scale-mixin.js';
const { scaleStyle } = ScaleMin();
import LabelTitle from '@/components/labeltitle.vue';
import { onMounted } from 'vue';
import sjzlleader from './component/sjzlleader.vue';
import sjzldy from './component/sjzldy.vue';
import sjlxfx from './component/sjlxfx.vue';
import sjqsfx from './component/sjqsfx.vue';
import zxsj from './component/zxsj.vue';
import dbqd from './component/dbqd.vue';
import cygj from './component/cygj.vue';
import xcdb from './component/xcdb.vue';
import { useUserStore } from '@/pinia/user.js';
import { getDataTotalList } from '@/api/event';
import { Log } from 'mars3d';
const piniaUser = useUserStore();
const UserId = localStorage.getItem('User');
// 需要根据权限判断是否显示
//领导是数组list 科员队员的数组list
const leaderList = [
  '1903999283762434048',
  '1903999283762434049',
  '1903999283766628353',
  '1903999283766628355',
];
const memberList = [
  '1903999283766628352',
  '1903999283766628354',
  '1903999283766628356',
];
let currentTime = ref(7);
const selectTime = (time) => {
  currentTime.value = time;
  getData();
};

let allData = ref({});
const getData = async () => {
  try {
    // if (piniaUser.user.role == "leader") {
    //   let { data } = await getDataTotalList({
    //     dateRange: currentTime.value, //1,7,30
    //   });
    //   allData.value = data;
    // } else {
    //   let { data } = await getDataTotalListStaff({
    //     dateRange: currentTime.value, //1,7,30
    //   });
    //   allData.value = data;
    // }
    let { data } = await getDataTotalList({
      dateRange: currentTime.value, //1,7,30
    });
    allData.value = data;
  } catch (e) {
    console.error(e);
  }
};

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.time-select {
  position: absolute;
  right: 0;
  top: 0px;
  width: 210px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .btn {
    background: #fff;
    display: inline-block;
    width: 70px;
    height: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #2263bf;
    line-height: 28px;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;

    &.active {
      background: #2263bf;
      color: #ffffff;
    }

    &.hasborder {
      border-left: 1px solid rgba(151, 151, 151, 0.21);
      border-right: 1px solid rgba(151, 151, 151, 0.21);
    }
  }
}

.jszl-content {
  width: 100%;
  height: 100%;
  position: relative;
  border: 1px solid transparent;

  .sjzcgl-content {
    width: 100%;
    position: absolute;
    right: 0px;
    top: -10px;
  }

  .box-flex {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 60px);

    // display: flex;
    // align-items: top;
    .left-box {
      width: 100%;
      display: flex;
      align-items: top;
      // flex-wrap: wrap;
    }

    // .right-box {
    //   width: 308px;
    //   height: 100%;
    //   margin-left: 20px;
    // }
  }
}
</style>
